<template>
  <div>
    <header-slot></header-slot>
    <el-card class="box-card">
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="60px"
        class="form"
      >
        <el-form-item label="用户名" class="account" prop="account">
          <el-input
            v-model="formData.account"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" class="password" prop="password">
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号" class="password" prop="phone">
          <el-input
            v-model="formData.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>

        <el-form-item label="性别" class="password">
          <el-radio-group v-model="formData.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="生日" class="password">
          <input
            type="date"
            class="birthday"
            @blur="birBlur"
            v-model="formData.birthday"
          />
          <p v-show="biryflog">请选择生日</p>
        </el-form-item>

        <el-button class="login" @click="register">注册</el-button>
      </el-form>
    </el-card>
    <footer-slot></footer-slot>
  </div>
</template>
<script>
import headerSlot from "./header-slot";
import footerSlot from "./footer-slot";
export default {
  components: { headerSlot, footerSlot },
  data() {
    // 验证密码
    var validatePas = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
      var regExp = /^(?=.*\d)[a-zA-Z0-9]{6,10}$/;
      if (!regExp.test(value)) {
        callback(new Error("必须为6-10位且不包含特殊字符"));
      } else {
        callback();
      }
    };
    // 验证手机号
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      var regExp = /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;
      if (!regExp.test(value)) {
        callback(new Error("必须是以13 14 15 17 18开头，长度为11的手机号"));
      } else {
        callback();
      }
    };
    return {
      formData: {
        account: "",
        password: "",
        phone: "",
        sex: "男",
        birthday: "",
      },
      rules: {
        account: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [{ validator: validatePas, trigger: "blur" }],
        phone: [{ validator: validatePass, trigger: "blur" }],
      },
      biryflog: false,
    };
  },
  methods: {
    register() {
      this.$refs["form"].validate((valid) => {
        if (valid && !this.biryflog) {
          this.$axios
            .post("/user/register", {
              username: this.formData.account,
              password: this.formData.password,
              phone: this.formData.phone,
              gender: this.formData.sex,
              birthday: this.formData.birthday,
              headPortrait: "../../static/head/no-img.jpg",
            })
            .then((res) => {
              if (res.data.data == "注册成功") {
                alert("注册成功");
                this.$router.push("/login");
              } else {
                alert("用户名已存在，请重新输入");
                this.formData.account = "";
                this.formData.password = "";
                this.formData.phone = "";
                this.formData.birthday = "";
              }
            });
        } else {
          if (!this.biryflog) {
            this.biryflog = true;
          }
          return false;
        }
      });
    },
    birBlur() {
      if (this.formData.birthday == "") {
        this.biryflog = true;
      } else {
        this.biryflog = false;
      }
    },
  },
};
</script>
<style scoped>
.form {
  position: relative;
  margin-top: 20px;
}
.box-card {
  width: 400px;
  margin: 200px auto;
}
.account {
  position: relative;
}
.password {
  position: relative;
}
.box-card /deep/ .el-form-item p {
  position: absolute;
  font-size: 12px;
  top: 40px;
  height: 19px;
  line-height: 19px;
  color: #f56c6c;
}
.login {
  display: block;
  width: 50%;
  margin: 40px auto 0;
}
.form > p {
  position: absolute;
  color: red;
  text-align: center;
  bottom: 55px;
  left: 50%;
  transform: translateX(-64px);
}
.birthday {
  width: 300px;
  height: 40px;
  border: 1px solid #dcdfe6;
  padding: 0 15px;
  box-sizing: border-box;
}
.form /deep/ .el-form-item__label::before {
  content: "" !important;
}
</style>